<template>
  <div class="admin-dashboard">
    <a-row :gutter="16">
      <!-- 数据概览卡片 -->
      <a-col :span="6">
        <a-card class="stat-card">
          <div class="stat-card-content">
            <div class="stat-icon user-icon">
              <icon-user />
            </div>
            <div class="stat-info">
              <div class="stat-title">用户总数</div>
              <div class="stat-value">{{ stats.userCount }}</div>
              <div class="stat-compare">
                较昨日 <span class="up">+{{ stats.userGrowth }}</span>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>

      <a-col :span="6">
        <a-card class="stat-card">
          <div class="stat-card-content">
            <div class="stat-icon question-icon">
              <icon-code-block />
            </div>
            <div class="stat-info">
              <div class="stat-title">题目总数</div>
              <div class="stat-value">{{ stats.questionCount }}</div>
              <div class="stat-compare">
                较昨日 <span class="up">+{{ stats.questionGrowth }}</span>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>

      <a-col :span="6">
        <a-card class="stat-card">
          <div class="stat-card-content">
            <div class="stat-icon submit-icon">
              <icon-send />
            </div>
            <div class="stat-info">
              <div class="stat-title">今日提交数</div>
              <div class="stat-value">{{ stats.todaySubmitCount }}</div>
              <div class="stat-compare">
                较昨日 <span class="up">+{{ stats.submitGrowth }}%</span>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>

      <a-col :span="6">
        <a-card class="stat-card">
          <div class="stat-card-content">
            <div class="stat-icon visit-icon">
              <icon-computer />
            </div>
            <div class="stat-info">
              <div class="stat-title">今日访问量</div>
              <div class="stat-value">{{ stats.todayVisitCount }}</div>
              <div class="stat-compare">
                较昨日 <span class="down">-{{ stats.visitGrowth }}%</span>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" style="margin-top: 16px">
      <!-- 提交趋势图表 -->
      <a-col :span="16">
        <a-card class="trend-card" title="题目提交趋势">
          <template #extra>
            <a-radio-group type="button" size="small" v-model="timeRange">
              <a-radio value="day">今日</a-radio>
              <a-radio value="week">本周</a-radio>
              <a-radio value="month">本月</a-radio>
            </a-radio-group>
          </template>

          <div class="chart-container" ref="chartRef"></div>
        </a-card>
      </a-col>

      <!-- 通知公告 -->
      <a-col :span="8">
        <a-card class="notice-card" title="通知公告">
          <template #extra>
            <a-button type="text" size="small">更多</a-button>
          </template>

          <a-list :max-height="315">
            <a-list-item v-for="notice in notices" :key="notice.id">
              <a-list-item-meta :title="notice.title">
                <template #description>
                  <div class="notice-meta">
                    {{ notice.type }} · {{ formatDate(notice.createTime) }}
                  </div>
                </template>
                <template #avatar>
                  <a-badge :color="getNoticeTypeColor(notice.type)" />
                </template>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" style="margin-top: 16px">
      <!-- 最近提交记录 -->
      <a-col :span="24">
        <a-card class="recent-card" title="最近提交记录">
          <template #extra>
            <a-button type="text" size="small">更多</a-button>
          </template>

          <a-table
            :columns="columns"
            :data="recentSubmits"
            :pagination="false"
            :bordered="false"
          >
            <template #status="{ record }">
              <a-tag :color="getStatusColor(record.status)">{{
                getStatusText(record.status)
              }}</a-tag>
            </template>

            <template #language="{ record }">
              <a-tag>{{ record.language }}</a-tag>
            </template>

            <template #operations>
              <a-button type="text" size="small">查看</a-button>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from "vue";
import {
  QuestionControllerService,
  QuestionSubmitControllerService,
  UserControllerService,
} from "../../../../generated";
import * as echarts from "echarts";
import { Message } from "@arco-design/web-vue";

// 统计数据
const stats = reactive({
  userCount: 0,
  userGrowth: 0,
  questionCount: 0,
  questionGrowth: 0,
  todaySubmitCount: 0,
  submitGrowth: 0,
  todayVisitCount: 0,
  visitGrowth: 0,
});

// 趋势图时间范围
const timeRange = ref("week");

// 图表实例
let chart: echarts.ECharts | null = null;
const chartRef = ref<HTMLElement | null>(null);

// 通知列表
const notices = ref([
  {
    id: 1,
    title: "系统更新：新增代码测试功能",
    type: "系统公告",
    createTime: new Date("2023-08-15"),
  },
  {
    id: 2,
    title: "重要：系统将于8月20日进行维护",
    type: "维护通知",
    createTime: new Date("2023-08-14"),
  },
  {
    id: 3,
    title: "比赛通知：第三届算法编程大赛开始报名",
    type: "比赛通知",
    createTime: new Date("2023-08-12"),
  },
  {
    id: 4,
    title: "新增：Python、Go语言支持",
    type: "功能更新",
    createTime: new Date("2023-08-10"),
  },
  {
    id: 5,
    title: '恭喜用户"编程大师"完成所有题目挑战',
    type: "用户成就",
    createTime: new Date("2023-08-08"),
  },
]);

// 表格列定义
const columns = [
  { title: "提交ID", dataIndex: "id" },
  { title: "题目", dataIndex: "questionName" },
  { title: "用户", dataIndex: "userName" },
  { title: "提交语言", dataIndex: "language", slotName: "language" },
  { title: "状态", dataIndex: "status", slotName: "status" },
  { title: "耗时", dataIndex: "judgeInfo.time" },
  { title: "内存", dataIndex: "judgeInfo.memory" },
  { title: "提交时间", dataIndex: "createTime" },
  { title: "操作", slotName: "operations" },
];

// 最近提交数据
const recentSubmits = ref([]);

// 格式化日期
const formatDate = (date: Date) => {
  return new Date(date).toLocaleDateString();
};

// 获取通知类型颜色
const getNoticeTypeColor = (type: string) => {
  switch (type) {
    case "系统公告":
      return "blue";
    case "维护通知":
      return "red";
    case "比赛通知":
      return "orange";
    case "功能更新":
      return "green";
    case "用户成就":
      return "purple";
    default:
      return "gray";
  }
};

// 获取状态文本
const getStatusText = (status: number) => {
  switch (status) {
    case 0:
      return "待判题";
    case 1:
      return "判题中";
    case 2:
      return "成功";
    case 3:
      return "失败";
    default:
      return "未知";
  }
};

// 获取状态颜色
const getStatusColor = (status: number) => {
  switch (status) {
    case 0:
      return "gray";
    case 1:
      return "orange";
    case 2:
      return "green";
    case 3:
      return "red";
    default:
      return "";
  }
};

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;
  chart = echarts.init(chartRef.value);

  const option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["提交总数", "通过数", "未通过数"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "提交总数",
        type: "line",
        smooth: true,
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: "通过数",
        type: "line",
        smooth: true,
        data: [82, 93, 90, 93, 74, 145, 156],
      },
      {
        name: "未通过数",
        type: "line",
        smooth: true,
        data: [38, 39, 11, 41, 16, 85, 54],
      },
    ],
  };

  chart.setOption(option);
};

// 获取统计数据
const fetchStats = async () => {
  try {
    // 实际项目中需要从后端获取这些数据
    // 以下是模拟数据
    stats.userCount = 1232;
    stats.userGrowth = 12;
    stats.questionCount = 345;
    stats.questionGrowth = 5;
    stats.todaySubmitCount = 1875;
    stats.submitGrowth = 8.5;
    stats.todayVisitCount = 3254;
    stats.visitGrowth = 2.3;
  } catch (error) {
    Message.error("获取统计数据失败");
  }
};

// 获取最近提交记录
const fetchRecentSubmits = async () => {
  try {
    // 实际项目中需要从后端获取这些数据
    // 以下是模拟数据
    recentSubmits.value = [
      {
        id: 10086,
        questionName: "两数之和",
        userName: "张三",
        language: "Java",
        status: 2,
        judgeInfo: { time: "10ms", memory: "5.2MB" },
        createTime: "2023-08-15 14:23:45",
      },
      {
        id: 10085,
        questionName: "最长回文子串",
        userName: "李四",
        language: "Python",
        status: 3,
        judgeInfo: { time: "15ms", memory: "8.1MB" },
        createTime: "2023-08-15 14:20:12",
      },
      {
        id: 10084,
        questionName: "合并两个有序链表",
        userName: "王五",
        language: "C++",
        status: 2,
        judgeInfo: { time: "8ms", memory: "4.2MB" },
        createTime: "2023-08-15 14:15:36",
      },
      {
        id: 10083,
        questionName: "三数之和",
        userName: "赵六",
        language: "JavaScript",
        status: 0,
        judgeInfo: { time: "-", memory: "-" },
        createTime: "2023-08-15 14:10:25",
      },
      {
        id: 10082,
        questionName: "删除链表的倒数第N个节点",
        userName: "钱七",
        language: "Go",
        status: 1,
        judgeInfo: { time: "-", memory: "-" },
        createTime: "2023-08-15 14:08:17",
      },
    ];
  } catch (error) {
    Message.error("获取提交记录失败");
  }
};

// 监听窗口大小变化
const handleResize = () => {
  chart?.resize();
};

onMounted(() => {
  // 获取数据
  fetchStats();
  fetchRecentSubmits();

  // 初始化图表
  setTimeout(() => {
    initChart();

    // 监听窗口大小变化
    window.addEventListener("resize", handleResize);
  }, 100);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  chart?.dispose();
});
</script>

<style scoped>
.admin-dashboard {
  padding: 8px 0;
}

.stat-card {
  height: 120px;
}

.stat-card-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  font-size: 24px;
  color: #fff;
  margin-right: 16px;
}

.user-icon {
  background-color: #165dff;
}

.question-icon {
  background-color: #00b42a;
}

.submit-icon {
  background-color: #f7ba1e;
}

.visit-icon {
  background-color: #ff7d00;
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-title {
  font-size: 14px;
  color: var(--color-text-3);
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--color-text-1);
  margin-bottom: 8px;
}

.stat-compare {
  font-size: 12px;
  color: var(--color-text-3);
}

.up {
  color: #00b42a;
}

.down {
  color: #f53f3f;
}

.chart-container {
  height: 350px;
}

.notice-meta {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--color-text-3);
}
</style>
